<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>
        绘制三角形
    </title>
</head>

<body onload="main()">
<canvas id="example" width="400" height="400" style="border: 1px solid red;"> canves</canvas>
<script src="../js/cuon-utils.js"></script>
<script src="../js/webgl-debug.js"></script>
<script src="../js/webgl-utils.js"></script>
<script>
    // 顶点着色器
    // 'attribute float a_PointSize;' +
    var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' +
        ' void main() {\n' +
        ' gl_Position = a_Position;\n' + // 设置坐标
        '}\n';

    // 片元着色器
    var FSHADER_SOURCE =
        'precision mediump float;' +
        'uniform vec4 u_FragColor;' +
        'void main() {\n' +
        ' gl_FragColor = vec4(1.0,1.0,0.0,1.0);\n' + // 设置颜色
        '}\n';

    function main() {

        var canves = document.getElementById("example");

        var gl = getWebGLContext(canves);

        // 初始化着色器
        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.error("着色器加载错误")
            return;
        }

        // 设置顶点位置
        var n = initVertexBuffers(gl);

        if (n < 0) {
            console.error("error")
            return;
        }

        gl.clearColor(0.0, 1.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLES, 0, n);
    }

    function initVertexBuffers(gl) {
        var vertices = new Float32Array([
            0.0, 0.5,
            -0.5, -0.5,
            0.5, -0.5
        ]);

        // 点的个数
        var n = vertices.length / 2;

        // 创建缓冲区对象
        var vertexBuffer = gl.createBuffer();

        if (!vertexBuffer) {
            console.error("缓冲区对象创建错误")
            return;
        }

        // 将缓冲区对象绑定到目标
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        // 向缓冲区对象中写入数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(gl.program, "a_Position");

        // 将缓冲区对象分配给 a_Position
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

        // 链接 a_Position 变量与分配给它的缓冲区对象
        gl.enableVertexAttribArray(a_Position);

        return n;
    }


</script>
</body>

</html>